import React from 'react';
import {WeaNewScroll} from 'ecCom';

export default class Main extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            collapse: false
        }
    }

    componentDidUpdate () {
        typeof this.props.panelCallback === 'function' && this.props.panelCallback(this.state.collapse)
    }

    toggleCollapse (state = false) {
        this.setState({collapse:state});
        typeof this.props.collapseCallback === 'function' && this.props.collapseCallback(state);
    }

    render() {

        const {collapse} = this.state;
        return (
            <div className={this.props.className} style={{
                position: 'absolute',
                height: collapse ? this.props.height : '0px',
                bottom: collapse ? '0px' : '30px',
                width: '100%',
                zIndex: 99
            }}>
                <span
                    onClick={() => this.toggleCollapse(!collapse)}
                    className="iconSpan"
                    style={{
                        top: collapse ? '-24px' : '-30px',
                        background: collapse && 'none',
                    }}
                >
                    <i style={{
                        display: collapse ? 'none' : 'inline-block',
                    }} className="icon-coms-form formBtn"/>

                    <i
                        style={{
                        display: collapse ? 'inline-block' : 'none',
                    }}
                        className="icon-coms-Clear clearBtn"/>
                </span>
                <div
                    className="childBox"
                    style={{display: collapse ? 'block' : 'none',
                        height: collapse ? this.props.height : '0',
                    }}>
                        {this.props.children}
                </div>
            </div>
        )
    }


}